<template>
	<view class="content b-t">
	

		<view class="m-list" v-if="merchantInfo && merchantInfo.merchantName">
			<view class="title">
				当前自提点
			</view>
			<view class="list b-b">
				<view class="wrapper">
					<view class="merchant-box">
						<text class="merchant">{{merchantInfo.merchantName}}</text>
					</view>
					<view class="u-box">
						<text class="name">{{merchantInfo.merchantAddress}}</text>
					</view>
				</view>
				<view class="distance">
					<view class="action button-orange-outline" @click="contact(merchantInfo)">联系</view>
					<view class="action button-base-outline" @click="navigate(merchantInfo)">导航</view>
				</view>
				
			</view>
			<view class="action-wrapper">
				<view class="left button-base-outline" @click="selectMerchant">重新设置</view>
				<view class="right button-base" @click="back">确定</view>
			</view>
			
		</view>
		<view class="no-merchant" v-if="!merchantInfo || !merchantInfo.merchantName">
			<view class="desc">你还没有选择自提点</view>
			<view class="action-wrapper">
				<view class="left button-base-outline" @click="back">返回</view>
				<view class="right button-base" @click="selectMerchant">设置自提点</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {

			}
		},
		onLoad(option) {
			
		},
		computed: {
			...mapState(['hasLogin', 'hasMerchant', 'userInfo', 'merchantInfo'])
		},
		methods: {
			...mapMutations(['changeMerchant']),
			selectMerchant(){
				uni.navigateTo({
					url:'/pages/merchant/nearby'
				})
			},
			back(){
				uni.navigateBack(
				{
					delta: 1
				});
			},
			contact(merchant){
				uni.makePhoneCall({
					phoneNumber:merchant.mobileNo
				})
			},
			navigate(merchant){
				uni.openLocation({
					latitude:merchant.latitude,
					longitude:merchant.longitude,
					success: function () {
						console.log('导航到自提店打开地图成功');
					}
				})
			}
		}
	}
</script>

<style lang='scss'>
	page {
		padding-bottom: 120upx;
	}

	.content {
		position: relative;
	}
	.list {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		margin-bottom: 20upx ;
		border:1px solid $base-color;
		border-radius: 20upx;
		background: #fff;
		position: relative;
		.distance {
			width: 200upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-left: 20px;
			justify-content: right;
			color: $font-color-light;
			font-size: $font-base;
			text-align: right;
			.button-base{
				width: 160upx;
			}
		}
		.action{
			    width: 89px;
			    margin: 0 0 5px 0;
		}
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
		.u-box {
			font-size: 28upx;
			color: $font-color-light;
			margin-top: 16upx;
		
			.name {
				margin-right: 30upx;
			}
		}
	}

	.merchant-box {
		display: flex;
		align-items: center;

		.tag {
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}

		.merchant {
			font-size: $font-lg;
			color: $font-color-dark;
		}
	}
	.m-list{
		overflow-y: scroll;
		margin: 20upx;
		.title{
			font-size: $font-lg+4upx;
			color: $font-color-dark;
			font-weight: bold;
			padding:20upx 0;
		}
	}
	.action-wrapper{
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		margin: 40upx;
		display: flex;
		align-items: flex-end;
		.left{
			margin-right: auto;
			width: 400upx;
			margin: 0 20upx 0 0 ;
		}
		.right{
			width: 400upx;
			margin: 0 0 0 20upx ;
		}
	}
	.no-merchant{
		margin: 60upx 40upx 40upx 40upx;
		.address{
			text-align: center;
			
			color: $font-color-dark;
			font-size: $font-lg+4upx;
		}
		.desc{
			text-align: center;
			margin: 40upx;
			color: $font-color-base;
		}
	}
</style>
